<template>
  <div class="notice-container">
    <!-- 左侧导航 -->
    <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        @select="handleMenuSelect"
        background-color="#1f2126"
        text-color="#bfc3c9"
        active-text-color="#409eff"
    >
      <el-menu-item index="1">
        <i class="el-icon-at"></i>
        <span>通知</span>
      </el-menu-item>
      <el-menu-item index="2">
        <i class="el-icon-chat-dot-round"></i>
        <span>点赞</span>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-star-on"></i>
        <span>评论</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-message"></i>
        <span>收藏</span>
      </el-menu-item>
      <el-menu-item index="5">
        <i class="el-icon-bell"></i>
        <span>私信</span>
      </el-menu-item>
    </el-menu>
    <!-- 右侧内容区域 -->
    <div class="content-wrapper">
      <template v-if="activeTab === '1'">
        <div class="notice-card-list">
          <NoticeCard
              v-for="item in NoticeData"
              :key="item.id"
              :notice="item"
              @delete="handleDelete"
              @viewDetail="openDetail"
          />
        </div>
        <!-- 抽屉组件 -->
        <NoticeDetailDrawer ref="detailDrawer" />
      </template>
      <!-- 其他分类可根据需求扩展表格/列表结构，这里简单示例“暂无内容” -->
      <template v-else>
        <div class="empty-tip">
          <i class="el-icon-info"></i>
          <span>暂无内容</span>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import NoticeCard from './NoticeCard.vue'
import NoticeDetailDrawer from './NoticeDetailDrawer.vue'

// 创建对抽屉组件的引用
const detailDrawer = ref(null)

// 打开详情抽屉
const openDetail = (notice) => {
  // 确保抽屉组件已正确引用
  if (detailDrawer.value) {
    detailDrawer.value.handleDetailData(notice)
  } else {
    console.error('抽屉组件引用失败')
  }
}

// 分类激活标识，对应左侧 menu 的 index
const activeTab = ref('1')
// 通知数据
const NoticeData = ref([])
// 单个通知对象（可用于筛选，若接口不需要可简化）
const notice = ref({
  id: '',
  userId: '',
  time: '',
  text: '',
  url: ''
})

/**
 * 获取通知数据
 * @param tab 分类标识，不同分类可传不同参数给接口区分
 */
const selectNotices = async (tab: string) => {
  try {
    let params: Record<string, string> = {}
    // 不同分类可自定义参数，比如 @我的 传 type=at_me 等，这里演示简单拼接
    if (tab === '1') {
      params = {
        id: notice.value.id,
        userId: notice.value.userId,
        time: notice.value.time,
        text: notice.value.text,
        url: notice.value.url
      }
    }
    const { data } = await axios.get('/api/notice', { params })
    NoticeData.value = data
  } catch (error) {
    ElMessage.error('获取通知数据失败，请稍后重试')
    console.error('获取通知数据失败:', error)
  }
}

/**
 * 删除通知
 * @param id 通知ID
 */
const handleDelete = async (id: string) => {
  try {
    const { data } = await axios.delete(`/api/notice/${id}`)
    if (data > 0) {
      ElMessage.success('删除成功')
      // 重新获取当前分类数据
      selectNotices(activeTab.value)
    }
  } catch (error) {
    ElMessage.error('删除失败，请稍后重试')
    console.error('删除通知失败:', error)
  }
}

/**
 * 切换左侧分类
 * @param key 分类标识，对应 menu 的 index
 */
const handleMenuSelect = (key: string) => {
  activeTab.value = key
  // 切换分类时重新请求数据
  selectNotices(key)
}

// 组件挂载时，默认加载 activeTab 对应的数据
onMounted(() => {
  selectNotices(activeTab.value)
})
</script>

<style scoped>
.notice-container {
  display: flex;
  height: calc(100vh - 60px); /* 可根据实际布局调整高度 */
  background-color: #fff; /* 深色背景，适配示例界面 */
  color: #fff;
}

/* 左侧菜单样式 */
.el-menu-vertical-demo {
  border-right: none; /* 去掉默认边框 */
  background-color: #fff;
}

.el-menu-item {
  color: #bfc3c9;
}

.el-menu-item.is-active {
  color: #409eff;
}

/* 右侧内容区域 */
.content-wrapper {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

/* 暂无内容提示 */
.empty-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
}

.empty-tip i {
  margin-right: 8px;
  font-size: 24px;
  color: #666;
}

/* 通知卡片列表 */
.notice-card-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
</style>